<template>
    <div>
        <div class = "header">
        <h1 style="margin: 0 auto;">封禁列表界面</h1>
    </div>
        <Admin_UserBaned_List></Admin_UserBaned_List>
        <form class="releaseDiv">
            <div class="phoneNumber-inputs">
                <input v-model="Phone_Number" type="text" placeholder="手机号" required />
            </div>
            <div class="salary-buttons">
                <button type="button" class="custom-button" @click="releaseUser">解封用户</button>
            </div>
        </form>
    </div>
  
</template>

<script>
import axios from 'axios';
import Admin_UserBaned_List from '@/components/Admin_UserBaned_List.vue';
export default {
    data(){
return {
  phoneNumber:''
}
    },
    components: {
        Admin_UserBaned_List,
        
    },
    methods:{

        releaseUser(){
            axios.post('http://localhost:8090/AdminUser/releaseUser',{
            phoneNumber:this.Phone_Number,
            }).then(response=>{
                if(response.data==='success'){
                    alert('解封成功');
                }else{
                    alert('该用户不存在或未被封禁');
                }
            })
        }
  
    }
}
</script>

<style scoped>
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}


.header {
    background-color: gainsboro;
    color: white;
    padding: 10px 0;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header h1 {
    margin: 0;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.releaseDiv, .updateSalary {
    position: fixed;
    bottom: 10px;
    padding: 20px;
    border: 2px solid #ddd;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 5px;
}

.releaseDiv {
    left: 10px;
}

.updateSalary {
    right: 10px;
}

.releaseDiv form, .updateSalary form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.salary-inputs, .salary-buttons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.salary-inputs input {
    flex: 1;
    height: 40px;
    margin-right: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.salary-inputs input:last-child {
    margin-right: 0;
}

.salary-buttons .custom-button {
    flex: 1;
    margin-right: 10px;
}

.salary-buttons .custom-button:last-child {
    margin-right: 0;
}

.custom-button {
    height: 40px;
    font-size: 14px;
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.custom-button:hover {
    background-color: #4cae4c;
}

input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

</style>
